import { Component }      from '@angular/core';

@Component({
  selector: 'vote-taker',
  template: `
    <h2>父组件监听子组件的事件</h2>
    <p>子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits( 向上弹射 ) 事件。
    父组件绑定到这个事件属性，并在事件发生时作出回应。</p>
    <p>子组件的 EventEmitter 属性是一个 输出属性 ，通常带有 @Output 装饰器 ，
    就像在 VoterComponent 中看到的。</p>

    <h3>Agree: {{agreedNum}}, Disagree: {{disagreedNum}}</h3>
    <my-voter *ngFor="let voter of voters; let i=index;"
      [name]="voter" [index]="i"
      (onVotedd)="onVotedEvent($event)" [isShow]="show" > 
    </my-voter>
  `
})  
// 框架 (Angular) 把事件参数 ( 用 $event 表示 ) 传给事件处理方法
// onVotedd 为子组件事件
// onVotedEvent 为父组件事件

export class VoteTakerComponent {
  agreedNum = 0;
  disagreedNum = 0;
  voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
  show:boolean;

  /**
   * 父组件 VoteTakerComponent 绑定了一个事件处理器 (onVoted) ，
   * 用来响应子组件的事件 ($event) 并更新一个计数器。
   **/ 
  onVotedEvent(agreed: boolean) {
    agreed ? this.agreedNum++ : this.disagreedNum++;
    this.show = agreed;
  }
}
